<template>
	<view class="center">
		<u-navbar title="邀请收入"></u-navbar>
		<view class="content">
			<view class="year-item" @click="onyear">
				<view class="year">
					2022年
					<u-icon v-if="!showmonth" name="arrow-right" color="#CCCCCC" size="18"></u-icon>
					<u-icon v-else name="arrow-down" color="#CCCCCC" size="18"></u-icon>
				</view>
				<view class="income">累积收入：￥738.10</view>
			</view>
			<view class="month-item" @click="onmonth" v-if="showmonth">
				<view class="month-box">
					<view class="month">1月</view>
					<view class="Price">
						188.00
						<u-icon name="arrow-right" color="#CCCCCC" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			showmonth: false
		};
	},

	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	methods: {
		//点击了年
		onyear() {
			this.showmonth = !this.showmonth;
		},
		//点击了月
		onmonth(){
			uni.navigateTo({
				url:'/pages/income-detail/index'
			})
			console.log('点击了月')
		}
	}
};
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.center {
	min-height: 100%;
	background-color: #f5f5f5;
	.content {
		.year-item {
			margin: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.year {
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}
			.income {
				font-size: 26rpx;
				font-weight: 400;
				color: #888888;
			}
		}
		.month-item {
			margin: 40rpx;
			background: #ffffff;

			.month-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: #eeeeee 1rpx solid;
				padding: 40rpx;
				.month {
					font-size: 28rpx;
					font-weight: 400;
					color: #888888;
				}
				.Price {
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}
}
</style>
